1
00:00:00,630 --> 00:00:03,050
Hello and welcome to this lecture.

2
00:00:03,270 --> 00:00:07,340
In this lecture we'll be looking at coordinates.

3
00:00:07,370 --> 00:00:17,790
It's important to understand how coordinates work in Noin how to manipulate the hastier mail campus

4
00:00:18,240 --> 00:00:19,620
on the screen.

5
00:00:19,620 --> 00:00:29,490
I have caught a basic illustration of that coordinate with the coordinates you quote like x axis and

6
00:00:29,490 --> 00:00:34,610
then you've got the White House is going down just as you for a moment.

7
00:00:34,650 --> 00:00:38,580
This is a campus where you are drawing on the canvas.

8
00:00:38,580 --> 00:00:48,480
You need to specify a way on the x and y axes you want the drawing to begin from in this illustration.

9
00:00:48,540 --> 00:00:51,970
The drawing will start from zero.

10
00:00:52,170 --> 00:00:55,660
So the Y an x axis have met and the point zero.

11
00:00:55,660 --> 00:01:03,330
So if you draw any For example we've drawn this way it will start from where the green dot is and then

12
00:01:03,330 --> 00:01:05,800
specifying the values in it.

13
00:01:06,090 --> 00:01:19,140
So to make it easier to explain let me show you an actual graphic that I drew using the Cambers element

14
00:01:19,200 --> 00:01:21,440
and Javascript.

15
00:01:21,540 --> 00:01:23,520
This is a compass.

16
00:01:23,520 --> 00:01:31,360
The green part here and the black graphic here is he rectangle.

17
00:01:31,370 --> 00:01:39,210
What is square is a square has been drawn in become this element so to illustrate how the coordinate

18
00:01:39,210 --> 00:01:40,200
works.

19
00:01:40,200 --> 00:01:41,960
Look at this code here.

20
00:01:41,970 --> 00:01:47,510
This is just a compass function that will fill the covers saw.

21
00:01:47,520 --> 00:01:51,050
These are the parameters for this function.

22
00:01:51,090 --> 00:01:59,250
What this is saying is that is telling you where you want the drawing of the canvas to start from.

23
00:01:59,280 --> 00:02:11,130
So there's 30 in the that on the x axis I want you to start from 30 to 2 pixels from the X and then

24
00:02:11,130 --> 00:02:13,700
30 from the Y.

25
00:02:13,770 --> 00:02:24,780
So the 30 here going this way is the X and then down is the y axis and then once you specify the where

26
00:02:24,780 --> 00:02:30,130
it all start on the x and y then you can start specifying the value.

27
00:02:30,330 --> 00:02:35,720
So this here now is the outer rule with this square.

28
00:02:35,760 --> 00:02:42,010
This is the height of the square by the first two values.

29
00:02:42,100 --> 00:02:48,400
Specify where on the x axis you want to start the drawing from the y axis.

30
00:02:48,480 --> 00:02:56,540
So I specified 30 pixels so you can think of each as the pixel within the canvas.

31
00:02:56,550 --> 00:03:00,300
So start from 30 you can specify any value.

32
00:03:00,420 --> 00:03:03,590
If you wanted to start from zero on zero.

33
00:03:03,630 --> 00:03:10,390
As I explained in the grampy if you wanted to start from that you would need to.

34
00:03:13,390 --> 00:03:21,830
If I specified this value a 0 0 that means the canvas will actually start from the very edge here so

35
00:03:21,870 --> 00:03:22,860
there would be no gap.

36
00:03:22,870 --> 00:03:30,340
It will start from the very point here right at the top so that means that you want it to start where

37
00:03:30,340 --> 00:03:33,040
the x and y axis meet.

38
00:03:33,200 --> 00:03:39,970
But if you want more spacing like I've done here you can specify different values on the x axis on the

39
00:03:39,970 --> 00:03:43,920
White House's for the Droid to begin.

40
00:03:43,930 --> 00:03:47,080
So this is how coordinates work.

41
00:03:47,080 --> 00:03:52,350
So in your work with the canvas element you'll be seen a lot of these coordinated values.

42
00:03:52,370 --> 00:04:00,220
Of course you need to specify where you want the drawing to start from on the x axis and on the y axis.

43
00:04:00,220 --> 00:04:04,630
So that's basically how coordinates work.

44
00:04:05,350 --> 00:04:15,670
In this lecture we had a brief illustration of how the x and y coordinates work in relationship to the

45
00:04:15,670 --> 00:04:22,690
canvas you identify identifying where you want the canvas drawing to start from on the X and on the

46
00:04:22,690 --> 00:04:24,330
y axis.

47
00:04:24,430 --> 00:04:26,350
Thank you so much for watching.

48
00:04:26,350 --> 00:04:27,330
Bye for now.